<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model修饰符</title>
</head>

<body>
    <p>v-model，实际上是v-on:input和v-bind:value的连用。</p>
    例子：
    &lt;input @input="formData.message = $event.target.value" :value="formData.message">
    <h2>v-model修饰符</h2>
    <ul>
        <li>.lazy: 事件的处理由input变为了change，用户录入完毕，文本框失去焦点之后，才完成值的绑定。</li>
        <li>.trim: 把输入的做有空格去掉（推荐文本框都加上该修饰符，避免用户传入非法空格）。</li>
        <li>.number: 用于自动将用户输入的值转换为数值类型，如无法被 parseFloat() 转换，则返回原始内容。</li>
    </ul>
    <div id="app">
        <p>lazy：</p>
        <input placeholder="编辑我……" v-model.lazy="formData.message">
        <p>消息是: {{ formData.message }}</p>

        <p>trim：</p>
        <input placeholder="编辑我……" v-model.trim="formData.message2">
        <pre>消息是: {{ formData.message2 }}</pre>

        <p>number：</p>
        <input placeholder="编辑我……" v-model.number="formData.message3">
        <pre>消息是: {{ formData.message3 }}</pre>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            formData: {
                message: "",
                message2: "",
                message3: "",
            }

        },
        methods: {

        }
    })
</script>

</html>